<template>
  <div v-if="isShow">
    <template v-for="element in data.list">
      <template v-if="element && element.type == 'gridPanel'">
        <div v-for="(col, colIndex) in element.columns" :key="colIndex">
          {{ createproperty(col) }}
          <QueryFromItem v-for="(el, i) in col.list" :key="el.key" :element="el" :index="i" :data="col" :style="{
              display:
                showQueryWhere.indexOf(el.options.filed) >= 0 ? '' : 'none'
            }" :modelProperty.sync="fromdata[el.options.filed]"></QueryFromItem>
        </div>
      </template>
      <template v-else-if="element.type === 'tabs'">
        <div v-for="tabel in element.options.panelist" :key="tabel.name">
          <div v-for="(col, colIndex) in tabel.columns" :key="colIndex">
            {{ createproperty(col) }}
            <QueryFromItem v-for="(el, i) in col.list" :key="el.key" :element="el" :index="i" :data="col" :style="{
                display:
                  showQueryWhere.indexOf(el.options.filed) >= 0 ? '' : 'none'
              }" :modelProperty.sync="fromdata[el.options.filed]"></QueryFromItem>
          </div>
        </div>
      </template>
      <template v-else-if="element.type === 'collapse'">
        <div v-for="tabel in element.options.panelist" :key="tabel.name">
          <div v-for="(col, colIndex) in tabel.columns" :key="colIndex">
            {{ createproperty(col) }}
            <QueryFromItem v-for="(el, i) in col.list" :key="el.key" :element="el" :index="i" :data="col" :style="{
                display:
                  showQueryWhere.indexOf(el.options.filed) >= 0 ? '' : 'none'
              }" :modelProperty.sync="fromdata[el.options.filed]"></QueryFromItem>
          </div>
        </div>
      </template>

    </template>
    <template v-if="fromdata.fcreationdate!==undefined">
      <el-col :xs="24" :md="12" :lg="8">
        <el-row style="padding-left: 1px;">
          <el-col :lg="24" class="border-content">
            <label class="labeltitle" :style="'width:100px;'">
              创建时间
            </label>
            <div :style="'margin-left: 100px;'">
              <el-date-picker v-model="fromdata.fcreationdate" type="daterange" align="right" unlink-panels range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" style="width: 100%;">
              </el-date-picker>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </template>
    <template v-if="fromdata.fcreatebyname!==undefined">
      <el-col :xs="24" :md="12" :lg="8">
        <el-row style="padding-left: 1px;">
          <el-col :lg="24" class="border-content">
            <label class="labeltitle" :style="'width:100px;'">
              创建人
            </label>
            <div :style="'margin-left: 100px;'">
              <el-input v-model="fromdata.fcreatebyname" size="small"></el-input>
            </div>
          </el-col>
        </el-row>
      </el-col>
    </template>
  </div>
</template>
<script>
import QueryFromItem from '@/components/formdesign/queryFromItem'
export default {
  name: 'QueryForm',
  props: ['data', 'showQueryWhere'],
  data () {
    return { fromdata: { fcreatebyname: undefined, fcreationdate: undefined }, initfromdata: {}, isShow: true }
  },
  components: { QueryFromItem },
  methods: {
    createproperty (col) {
      for (let i = 0; i < col.list.length; i++) {
        const el = col.list[i]
        if (this.fromdata[el.options.filed] === undefined) {
          switch (el.type) {
            case 'input':
            case 'textarea':
            case 'editor':
            case 'radio':
            case 'colorpicker':
            case 'select':
            case 'checkbox':
              this.fromdata[el.options.filed] = ''
              break
            case 'timepicker':
              this.fromdata[el.options.filed] = []
              break
            case 'slider':
              this.fromdata[el.options.filed] = [0, 100]
              break
            case 'date':
              if (el.options.modeltype === 'date') {
                this.fromdata[el.options.filed] = []
              } else {
                this.fromdata[el.options.filed] = ''
              }
              break
            case 'inputnumber':
            case 'rate':
            case 'switch':
              this.fromdata[el.options.filed] = null
              break
            default:
              this.fromdata[el.options.filed] = ''
              break
          }
        }
      }

      return ''
    },
    getfromdata () {
      return this.fromdata
    },
    Resetfromdata () {
      // this.isShow = false
      // Object.assign(this.fromdata, this.initfromdata)
      // this.isShow = true
      // this.$forceUpdate()
      this.fromdata = JSON.parse(JSON.stringify(this.initfromdata))
      this.isShow = false
      this.$nextTick(() => {
        this.isShow = true
      })
    }
  },
  created () {
    this.fromdata.fcreationdate = undefined
    this.fromdata.fcreatebyname = undefined
    for (let i = 0; i < this.showQueryWhere.length; i++) {
      if (this.showQueryWhere[i] === 'fcreationdate') {
        this.fromdata.fcreationdate = []
      } else if (this.showQueryWhere[i] === 'fcreatebyname') {
        this.fromdata.fcreatebyname = ''
      }
    }
    this.initfromdata = JSON.parse(JSON.stringify(this.fromdata))
  },
  watch: {
    showQueryWhere (val) {
      this.fromdata.fcreationdate = undefined
      this.fromdata.fcreatebyname = undefined
      for (let i = 0; i < val.length; i++) {
        if (val[i] === 'fcreationdate') {
          this.fromdata.fcreationdate = []
        } else if (val[i] === 'fcreatebyname') {
          this.fromdata.fcreatebyname = ''
        }
      }
      this.initfromdata = JSON.parse(JSON.stringify(this.fromdata))
    }
  }
}
</script>
<style scoped>
.labeltitle {
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 30px;
  /* padding: 0 12px 0 0; */
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-weight: normal;
}
.border-title {
  height: 42px;
  line-height: 42px;
  padding-left: 15px;

  border-top: none;
  border-right: none;
}

.border-content {
  border-top: none;
  border-right: none;
  height: 42px;
  padding: 4px 15px;
}

.border-mult .border-content {
  height: auto;
  border-bottom: none;
}

.border-mult {
  background-color: #f5f5f5;
}

.border-mult .border-title {
  height: auto;
  border-bottom: none;
  border-left: none;
  margin-left: -2px;
}
</style>
